<template>
    <div class="table-container">
        <div class="date-picker">
            <div>统计日期段:</div>
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始时间"
                end-placeholder="结束时间" />
        </div>
        <el-table :data="tableData" style="width: 100%" class="table" stripe height="900" @row-click="handleRowClick">
            <el-table-column prop="name" label="油库名称" min-width="100" align="center" />
            <el-table-column prop="noticeCode" label="通知单号" min-width="100" align="center" show-overflow-tooltip />
            <el-table-column prop="checkType" label="检查类型" min-width="100" align="center" show-overflow-tooltip />
            <el-table-column prop="level" label="问题级别" min-width="100" align="center">
                <template #default="scope">
                    <el-tag size="large"
                        :style="{ backgroundColor: LEVEL_COLOR_EUM[scope.row.level as keyof typeof LEVEL_COLOR_EUM], color: '#fff', fontSize: '14px' }">
                        {{ scope.row.level }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="dutyGroup" label="责任分组" min-width="100" align="center" show-overflow-tooltip />
            <el-table-column prop="dept" label="考评部门" min-width="100" align="center" show-overflow-tooltip />
            <el-table-column prop="month" label="考核月份" align="center" />
            <el-table-column prop="problemCategorize" label="问题类别" min-width="100" align="center" />
            <el-table-column prop="problemType" label="问题类型" min-width="100" align="center" show-overflow-tooltip/>
            <el-table-column prop="problem" label="存在问题" min-width="100" align="center" show-overflow-tooltip />
            <el-table-column prop="correctionDesc" label="整改情况" min-width="100" align="center" show-overflow-tooltip>
                <template #default="scope">
                    <span :style="{ color: CORR_COLOR_EUM[scope.row.correction as keyof typeof CORR_COLOR_EUM] }">
                        {{ scope.row.correctionDesc }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="responsibleBy" label="责任人" min-width="100" align="center" />
            <el-table-column prop="replyBy" label="回复人" min-width="100" align="center" />
            <el-table-column prop="status" label="状态" min-width="100" align="center" show-overflow-tooltip />
            <el-table-column prop="createdBy" label="创建人" min-width="100" align="center" />
            <el-table-column prop="createdDate" label="创建日期" min-width="100" align="center" />
        </el-table>
        <el-pagination :background="true" :current-page="pageable.pageNum" :page-size="pageable.pageSize"
            :page-sizes="[10, 25, 50, 100]" :total="pageable.total" layout="total, sizes, prev, pager, next, jumper"
            @size-change="getData" @current-change="getData" style="margin-top: 20px;"></el-pagination>
        <ProBlemDetailDia :problem-id="problemId" ref="problemDetailDiaRef"></ProBlemDetailDia>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ProBlemDetailDia from '@/components/ProblemDetailDia.vue';
import { ElDialog } from 'element-plus';
// import { getDetail } from '@/api/index.ts';

const dateRange = ref<string[]>([]);

const LEVEL_COLOR_EUM = {
    "轻微": "rgb(130, 85, 251, .5)",
    "一般": "rgb(12, 237, 208, .5)",
    "严重": "rgb(255, 182, 42, .5)",
    "紧急": "rgb(242, 99, 123, .5)"
}
const CORR_COLOR_EUM = {
    "1": "#8255FB",
    "0": "#0CEDD0",
}
// 表格数据类型
interface tableDataType {
    name?: string,
    noticeCode?: string,
    checkType?: string,
    level?: keyof typeof LEVEL_COLOR_EUM,
    dutyGroup?: string,
    dept?: string,
    month?: string,
    problemCategorize?: string
    problemType?: string
    problem?: string
    correction?: keyof typeof CORR_COLOR_EUM
    correctionDesc?: string //整改情况描述
    responsibleBy?: string
    replyBy?: string
    createdBy?: string
    status?: string
    createdDate?: string
    id?: string
}

const tableData = ref<tableDataType[]>([
    {
        name: '曲溪油库',
        noticeCode: 'TZ曲溪20250381',
        checkType: '油库自查',
        level: '轻微',
        dutyGroup: '作业一班',
        dept: '仓储党委组织部（人力资源部）',
        month: '7',
        problemCategorize: '设备检查维护',
        problemType: '其他检查维护管理',
        problem: '粤VD5155车灭火器喷管破裂。',
        correction: '0',
        correctionDesc: '',
        responsibleBy: '',
        replyBy: '',
        status: '请油库主任确认检查内容',
        createdBy: '林巧扬',
        createdDate: '2025-07-15 7:27:00',
        id: '1'
    },
    {
        name: '曲溪油库',
        noticeCode: 'TZ曲溪20250380',
        checkType: '油库自查',
        level: '轻微',
        dutyGroup: '作业一班',
        dept: '仓储党委组织部（人力资源部）',
        month: '7',
        problemCategorize: '其他',
        problemType: '其他',
        problem: '李美华19：18该车司机出验单室打电话。',
        correction: '0',
        correctionDesc: '',
        responsibleBy: '',
        replyBy: '',
        status: '请油库主任确认检查内容',
        createdBy: '林巧扬',
        createdDate: '2025-07-15 7:26:00',
        id: '1'
    },
    {
        name: '阳江油库',
        noticeCode: 'TZ阳江20250296',
        checkType: '油库自查',
        level: '轻微',
        dutyGroup: '',
        dept: '仓储储运管理部',
        month: '7',
        problemCategorize: '其他',
        problemType: '其他',
        problem: '7月15日15时40分左右，粤Q3173挂司机在发油台装油过程中挽起袖子操作设备。',
        correction: '0',
        correctionDesc: '',
        responsibleBy: '',
        replyBy: '',
        status: '请油库主任确认检查内容',
        createdBy: '黄伟明',
        createdDate: '2025-07-15 7:05:00',
        id: '1'
    },
    {
        name: '张家边油库',
        noticeCode: 'TZ张家20250357',
        checkType: '油库自查',
        level: '轻微',
        dutyGroup: '作业三班',
        dept: '仓储储运管理部',
        month: '7',
        problemCategorize: '设备日常管理',
        problemType: '其他日常管理',
        problem: '发油台4号岛阀门AF112丝杆生锈需清洁保养',
        correction: '0',
        correctionDesc: '',
        responsibleBy: '',
        replyBy: '',
        status: '请油库主任确认检查内容',
        createdBy: '陈广斌',
        createdDate: '2025-07-15 6:22:00',
        id: '2'
    },
    {
        name: '大鹏湾油库',
        noticeCode: 'TZ大鹏20250370',
        checkType: '油库自查',
        level: '轻微',
        dutyGroup: '作业三班',
        dept: '仓储储运管理部',
        month: '7',
        problemCategorize: '其他',
        problemType: '其他',
        problem: '14:30安全员监管司机操作发油不到位',
        correction: '0',
        correctionDesc: '已对安全员陈运生进行批评教育，要求严格落实工作细则',
        responsibleBy: '吴吉东',
        replyBy: '吴吉东',
        status: '请油库主任确认检查内容',
        createdBy: '吴吉东',
        createdDate: '2025-07-15 5:16:00',
        id: '3'
    },
    {
        name: '篁边油库',
        noticeCode: 'TZ篁边20250357',
        checkType: '油库自查',
        level: '轻微',
        dutyGroup: '',
        dept: '仓储储运管理部',
        month: '7',
        problemCategorize: '其他',
        problemType: '其他',
        problem: '生活区大门口道闸小门损坏。',
        correction: '0',
        correctionDesc: '已修复，已整改。',
        responsibleBy: '唐以荣',
        replyBy: '黄锦培',
        status: '整改通知书整改内容已复核确认',
        createdBy: '黄锦培',
        createdDate: '2025-07-15 4:52:00',
        id: '4'
    },
    {
        name: '黄埔油库',
        noticeCode: 'TZ黄埔20251090',
        checkType: '油库自查',
        level: '轻微',
        dutyGroup: '',
        dept: '仓储储运管理部',
        month: '7',
        problemCategorize: '计量管理',
        problemType: '台账报表管理',
        problem: '《计量余油保管登记表》（汽油）7月15日回收人应该手工签名。',
        correction: '0',
        correctionDesc: '',
        responsibleBy: '',
        replyBy: '',
        status: '请油库主任确认检查内容',
        createdBy: '赖爱鸿',
        createdDate: '2025-07-15 4:33:00',
        id: '5'
    },
    {
        name: '张家边油库',
        noticeCode: 'TZ张家20250356',
        checkType: '油库自查',
        level: '轻微',
        dutyGroup: '作业二班',
        dept: '仓储储运管理部',
        month: '7',
        problemCategorize: '计量管理',
        problemType: '台账报表管理',
        problem: '管输计划XZGZ第202507－03号下载超耗（溢余）95号车用汽油（VIB）批次索赔通知书未录入',
        correction: '0',
        correctionDesc: '已重新录入完成整改',
        responsibleBy: '罗志荣',
        replyBy: '罗志荣',
        status: '请油库主任确认检查内容',
        createdBy: '陈广斌',
        createdDate: '2025-07-15 4:31:00',
        id: '6'
    },
    {
        name: '篁边油库',
        noticeCode: 'TZ篁边20250356',
        checkType: '油库自查',
        level: '轻微',
        dutyGroup: '',
        dept: '仓储储运管理部',
        month: '7',
        problemCategorize: '其他',
        problemType: '其他',
        problem: '发油台9号台位仓位识别器有故障，转用2仓时识别不了。',
        correction: '0',
        correctionDesc: '',
        responsibleBy: '李润斌',
        replyBy: '',
        status: '请油库主任确认检查内容',
        createdBy: '黄传永',
        createdDate: '2025-07-15 4:05:00',
        id: '7'
    },
    {
        name: '寮步油库',
        noticeCode: 'TZ寮步20250268',
        checkType: '油库自查',
        level: '轻微',
        dutyGroup: '作业一班',
        dept: '仓储储运管理部',
        month: '7',
        problemCategorize: '其他',
        problemType: '其他',
        problem: '安全员在发油现场卷裤腿（15时40分）',
        correction: '0',
        correctionDesc: '',
        responsibleBy: '',
        replyBy: '',
        status: '请油库主任确认检查内容',
        createdBy: '黄烈永',
        createdDate: '2025-07-15 3:55:00',
        id: '8'
    }
])

interface Pageable {
    pageNum: number,
    pageSize: number,
    total: number
}
const pageable = ref<Pageable>({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

// 
function getData() {
    // getDetail(id.value).then(res=>{
    //     this.tableData = res.data
    // })
}

const router = useRouter()
const problemId = ref<string>('')

const problemDetailDiaRef = ref()

function handleRowClick(row: tableDataType) {
    console.log('row', row);
    problemId.value = row.id as string
    problemDetailDiaRef.value.dialogVisible = true
    // const targetUrl = router.resolve({ path: "/problemDetail", query: { id: row.id, } }).href;
    // window.open(targetUrl, '_blank');
}

const route = useRoute()
const warehouseID = ref<string>('')
onMounted(() => {
    warehouseID.value = route.query.id as string
    // 实际数据请求
    if (warehouseID.value) {
        getData();
    }
})

</script>

<style scoped lang="scss">
:deep(.el-popper) {
    font-size: 16px;
}

.table-container {
    margin-top: 20px;
    position: relative;

    .date-picker {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 0 5px;
        left: 20px;
        top: -50px;

        :deep(.el-date-editor) {
            width: 205px;

        }


        :deep(.el-date-editor .el-range-separator) {
            color: #fff;
        }

        :deep(.el-date-editor .el-range-input) {
            color: #fff;
            line-height: 32px;
        }
    }
}
</style>